import React, { useState } from 'react';

import { Modal } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import FileOpen from '@/components/FileIframOpen';
import { accountList } from '@/services/public'
interface HistoryAccountProps {
    value?: any;
    modalVisible: boolean;
    onCancel: () => void;
}
const HistoryAccount: React.FC<HistoryAccountProps> = ({ modalVisible, onCancel, value }) => {
    const [fileUrlVisible, setFileUrlVisible] = useState<boolean>(false);
    const [fileUrl, setFileUrl] = useState<any>('');
    const columns: ProColumns<any>[] = [
        {
            title: '申请人',
            dataIndex: 'applyUserName',
            width: 100,
        },
        // {
        //     title: '账户状态',
        //     dataIndex: 'applyStatus',
        //     valueEnum: {
        //         0: { text: '未开户', status: "default" },
        //         1: { text: '开户申请中', status: "processing" },
        //         2: { text: '已开户', status: "success" },
        //         3: { text: '已销户', status: "default" },
        //         4: { text: '销户申请中', status: "processing" },
        //     },
        //     width: 100,
        // },
        {
            title: '账户名称',
            dataIndex: 'accountName',
            width: 100,
        },
        {
            title: '账户账号',
            dataIndex: 'applyAccount',
            width: 100,
        },
        {
            title: '申请类型',
            dataIndex: 'type',
            width: 100,
            valueEnum: {
              '1': {
                text: '开户申请',
                status: '1',
              },
              '2': {
                text: '销户申请',
                status: '2',
              },
              '-2':{
                text:'变更申请',
                status:'-2'
              }
            },
          },
        {
            title: '开户行信息',
            dataIndex: 'bankName',
            width: 100,
        },
        {
            title: '银行经办人/电话',
            dataIndex: 'bankName',
            width: 100,
            render: (text, record) => {
                return (
                    <div>
                        <div>{record.bankAgentUserName}</div>
                        <div>{record.bankAgentUserMobile}</div>
                    </div>
                )
            }

        },
        {
            title: '农民工工资专户协议',
            dataIndex: 'tripartiteAgreementSpecialFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.tripartiteAgreementSpecialFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.tripartiteAgreementSpecialFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '工资专户开户回执单',
            dataIndex: 'accountOpeningReceiptFileUrl',
            width: 100,
            render: (text, record: any) => {
                return (
                    record.accountOpeningReceiptFileUrl ?
                        <a
                            onClick={() => {
                                setFileUrl(record.accountOpeningReceiptFileUrl);
                                setFileUrlVisible(true);
                            }}
                        >
                            查看
                        </a> : '-'
                )
            }
        },
        {
            title: '公示照片',
            dataIndex: 'noArrearsFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.noArrearsFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.noArrearsFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '盖章公告公示',
            dataIndex: 'noArrearsFileSealUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.noArrearsFileSealUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.noArrearsFileSealUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '5方验收报告',
            dataIndex: 'reportFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.reportFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.reportFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '专户变更申请书',
            dataIndex: 'changeSpecialAccountFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.changeSpecialAccountFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.changeSpecialAccountFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '专户销户申请书',
            dataIndex: 'cancelFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.cancelFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.cancelFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '专户销户承诺书',
            dataIndex: 'cancelPromiseFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.cancelPromiseFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.cancelPromiseFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '劳监销户函',
            dataIndex: 'cancelNoticeFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.cancelNoticeFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.cancelNoticeFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
        {
            title: '金融机构销户证明',
            dataIndex: 'cancelNoticeProveFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.cancelNoticeProveFileUrl?
                    <a
                        onClick={() => {
                            setFileUrl(record.cancelNoticeProveFileUrl);
                            setFileUrlVisible(true);
                        }}
                    >
                        查看
                    </a>:'-'
                )
            }
        },
    ]
    const listRequest = async (params: any) => {
        params.pageNo = params.current;
        let response = await accountList({ specialAccountId: value.specialAccountId, ...params });
        return response;
    };

    return <>
        <Modal title="历史账户" onCancel={onCancel} visible={modalVisible} footer={null} width={'1200px'}>
            <ProTable
                headerTitle='历史账户'
                request={(params) => listRequest(params)}
                columns={columns}
                rowSelection={false}
                options={false}
                search={false}
            />
        </Modal>
        {fileUrlVisible && (
            <FileOpen
                title={''}
                fielUrl={fileUrl}
                modalVisible={fileUrlVisible}
                onCancel={() => {
                    setFileUrlVisible(false);
                    setFileUrl('');
                }}
            />
        )}
    </>
}
export default HistoryAccount;